<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>带数字的滑块</title>
	<link rel="stylesheet" type="text/css" href="jquery-ui/jquery-ui.css"/>
	<style>
	  #custom-handle {
	    width: 3em;
	    height: 1.6em;
	    top: 50%;
	    margin-top: -.8em;
	    text-align: center;
	    line-height: 1.6em;
	  }
	  </style>
</head>
<body>
	<div id="slider">
	  <div id="custom-handle" class="ui-slider-handle"></div>
	</div>
	<script src="jquery-ui/jquery.js"></script>
	<script src="jquery-ui/jquery-ui.js"></script>
	<script>
	  $( function() {
	    var handle = $( "#custom-handle" );
	    $( "#slider" ).slider({
	      create: function() {
	        handle.text( $( this ).slider( "value" ) );
	      },
	      slide: function( event, ui ) {
	        handle.text( ui.value );
	      }
	    });
	  } );
	  </script>
</body>
</html>